<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style type="text/css">
      form div {
        margin: 5px 0;
      }

      .int label {
        float: left;
        width: 100px;
        text-align: right;
      }

      .int input {
        padding: 1px 1px;
        border: 1px solid #ccc;
        height: 16px;
      }

      .sub {
        padding-left: 100px;
      }

      .sub input {
        margin-right: 10px;
      }

      .formtips {
        width: 200px;
        margin: 2px;
        padding: 2px;
      }

      .onError {
        background: #ffe0e9 url(../static/images/reg3.gif) no-repeat 0 center;
        padding-left: 25px;
      }

      .onSuccess {
        background: #e9fbeb url(../static/images/reg4.gif) no-repeat 0 center;
        padding-left: 25px;
      }

      .high {
        color: red;
      }

      .msg {
        width: 300px;
        margin: 100px;
      }

      .msg_caption {
        width: 100%;
        overflow: hidden;
        margin-bottom: 1px;
      }

      .msg_caption span {
        display: block;
        float: left;
        margin: 0 2px;
        padding: 4px 10px;
        background: #898989;
        cursor: pointer;
        color: white;
      }

      .msg textarea {
        width: 300px;
        height: 80px;
        height: 100px;
        border: 1px solid #000;
      }

      div.centent {
        float: left;
        text-align: center;
        margin: 10px;
      }

      span {
        display: block;
        margin: 2px 2px;
        padding: 4px 10px;
        background: #898989;
        cursor: pointer;
        font-size: 12px;
        color: white;
      }

      table {
        border: 0;
        border-collapse: collapse;
      }

      div {
        font: normal 12px/17px Arial;
      }

      td {
        font: normal 12px/17px Arial;
        padding: 2px;
        width: 100px;
      }

      th {
        font: bold 12px/17px Arial;
        text-align: left;
        padding: 4px;
        border-bottom: 1px solid #333;
        width: 100px;
      }

      .even {
        background: #fff38f;
      }

      /* 偶数行样式*/
      .odd {
        background: #ffffee;
      }

      /* 奇数行样式*/
      .selected {
        background: #ff6500;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>表单：表单验证</h2>
    <form method="post" action="">
      <div class="int">
        <label for="username">用户名:</label>
        <input type="text" id="username" class="required" />
      </div>
      <div class="int">
        <label for="email">邮箱:</label>
        <input type="text" id="email" class="required" />
      </div>
      <div class="int">
        <label for="personinfo">个人资料:</label>
        <input type="text" id="personinfo" />
      </div>
      <div class="sub">
        <input type="submit" value="提交" id="send" /><input
          type="reset"
          id="res"
        />
      </div>
    </form>

    <h2>表单：textarea放大与缩小</h2>
    <form action="" method="post">
      <div class="msg">
        <div class="msg_caption">
          <span class="bigger">放大</span>
          <span class="smaller">缩小</span>
        </div>
        <div>
          <textarea id="comment" rows="8" cols="20">
多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea
          >
        </div>
      </div>
    </form>

    <!--复选框-->
    <h2>表单：复选框-</h2>
    <form>
      你爱好的运动是？<input type="checkbox" id="CheckedAll" />全选/全不选<br />
      <input type="checkbox" name="items" value="足球" />足球
      <input type="checkbox" name="items" value="篮球" />篮球
      <input type="checkbox" name="items" value="羽毛球" />羽毛球
      <input type="checkbox" name="items" value="乒乓球" />乒乓球<br />
      <input type="button" value="提　交" />
    </form>

    <!--下拉框-->
    <h2>表单：下拉框穿梭</h2>
    <div class="centent">
      <select
        multiple="multiple"
        id="select1"
        style="width: 100px; height: 160px"
      >
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
        <option value="4">选项4</option>
        <option value="5">选项5</option>
        <option value="6">选项6</option>
        <option value="7">选项7</option>
      </select>
      <div>
        <span id="add">选中添加到右边&gt;&gt;</span>
        <span id="add_all">全部添加到右边&gt;&gt;</span>
      </div>
    </div>
    <div class="centent">
      <select
        multiple="multiple"
        id="select2"
        style="width: 100px; height: 160px"
      >
        <option value="8">选项8</option>
      </select>
      <div>
        <span id="remove">&lt;&lt;选中删除到左边</span>
        <span id="remove_all">&lt;&lt;全部删除到左边</span>
      </div>
    </div>

    <div>
      <h2>表格：内容筛选</h2>
      <input type="text" id="filterName" />
      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>暂住地</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>张山</td>
            <td>男</td>
            <td>浙江宁波</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>女</td>
            <td>浙江杭州</td>
          </tr>
          <tr>
            <td>王五</td>
            <td>男</td>
            <td>湖南长沙</td>
          </tr>
          <tr>
            <td>找六</td>
            <td>男</td>
            <td>浙江温州</td>
          </tr>
          <tr>
            <td>Rain</td>
            <td>男</td>
            <td>浙江杭州</td>
          </tr>
          <tr>
            <td>MAXMAN</td>
            <td>女</td>
            <td>浙江杭州</td>
          </tr>
          <tr>
            <td>王六</td>
            <td>男</td>
            <td>浙江杭州</td>
          </tr>
          <tr>
            <td>李字</td>
            <td>女</td>
            <td>浙江杭州</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>男</td>
            <td>湖南长沙</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="../static/plugins/jquery/jquery-3.3.1.min.js"></script>
    <script>
      $(function () {
        /*
         * 表单验证
         * */
        $("form :input.required").each(function () {
          var $requied = $('<strong class="high">*</strong>');
          $(this).parent().append($requied);
        });

        //为表单元素添加失去焦点事件
        $("form :input").blur(function () {
          var $parent = $(this).parent();
          //验证表单之前删除之前的提示
          $parent.find(".formtips").remove();
          //验证用户名
          if ($(this).is("#username")) {
            if (this.value == "" || this.value.length < 6) {
              var errMag = "请输入至少6位的用户名";
              $parent.append(
                '<span class="onError formtips">' + errMag + "</span>"
              );
            } else {
              var ok = "输入正确";
              $parent.append(
                '<span class="onSuccess formtips">' + ok + "</span>"
              );
            }
          }

          //验证邮箱
          if ($(this).is("#email")) {
            if (
              this.value == "" ||
              (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))
            ) {
              var errMag = "请输入正确的邮箱格式";
              $parent.append(
                '<span class="onError formtips">' + errMag + "</span>"
              );
            } else {
              var ok = "输入正确";
              $parent.append(
                '<span class="onSuccess formtips">' + ok + "</span>"
              );
            }
          }
        });

        $("input")
          .focus(function () {
            $(this).addClass("focus");
          })
          .blur(function () {
            $(this).removeClass("focus");
          });

        //放大
        var commentHeight = $("#comment").height();
        $(".bigger").click(function () {
          if (commentHeight < 200) {
            $("#comment").height(commentHeight + 50);
          }
        });

        //缩小
        $(".smaller").click(function () {
          if (commentHeight > 50) {
            $("#comment").height(commentHeight - 50);
          }
        });

        /*
         * 复选框
         * 全选与不全选
         * */
        $("#CheckedAll").click(function () {
          // $('input[name=items]:checkbox').each(function () {
          //     this.checked = !this.checked;
          // })

          if (!this.checked) {
            $("input[name=items]:checkbox").attr("checked", false);
          } else {
            $("input[name=items]:checkbox").attr("checked", true);
          }
        });

        /*
         * 下拉框
         * */
        //单个选中添加到右侧
        $("#add").click(function () {
          //选中左侧的选项
          var $parent = $("#select1 option:selected");
          //添加到右侧
          $parent.appendTo("#select2");
        });

        //全部选中添加到右侧
        $("#add_all").click(function () {
          var $parent = $("#select1 option");
          $parent.appendTo("#select2");
        });

        //双击某个属性添加给对方
        $("#select1").dblclick(function () {
          //双击事件
          var $parent = $("option:selected", this); //获取选中的选项
          $parent.appendTo("#select2");
        });

        //单个选中删除到左侧
        $("#remove").click(function () {
          var $parent = $("#select2 option:selected");
          $parent.appendTo("#select1");
        });

        //全部选中删除到左侧
        $("#remove_all").click(function () {
          var $parent = $("#select2 option");
          $parent.appendTo("#select1");
        });

        /*
         * 表格内容筛选
         * */
        $("#filterName").keyup(function () {
          //根据用户输入的内容筛选
          $("table tbody tr")
            .hide()
            .filter(':contains("' + $(this).val() + '")')
            .show();
        });
      });
    </script>
  </body>
</html>
